<nz-drawer [nzBodyStyle]="{ overflow: 'auto' }" [nzClosable]="true" [nzVisible]="visible" [nzMaskClosable]="false"
  nzPlacement="right" nzTitle="添加新列" [nzWidth]="500" [nzFooter]="footerTpl" (nzOnClose)="close()">
  <ng-container *nzDrawerContent>
    <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <nz-form-item *ngFor="let control of listOfControl; let i = index">
        <nz-form-label [nzXs]="24" [nzSm]="6" [nzFor]="control.column" nzRequired>
          列名 - {{i+1}}
        </nz-form-label>
        <nz-form-control [nzXs]="24" [nzSm]="17" [nzErrorTip]="errorTpl">
          <div nz-row [nzGutter]="10">
            <div nz-col nzSpan="20">
              <nz-input-group nzCompact>
                <nz-select [formControlName]="control.datatype" (ngModelChange)="typeChange($event,i)"
                  nzPlaceHolder="选择类型 " style="width:40%;">
                  <nz-option nzValue="date" nzLabel="日期"></nz-option>
                  <nz-option nzValue="number" nzLabel="数值"></nz-option>
                  <nz-option nzValue="text" nzLabel="字符串"></nz-option>
                </nz-select>
                <input nz-input placeHolder="列名" type="text" [formControlName]="control.column" style="width:60%;"
                  (change)="columnChange($event,i)">
                
                <ng-template #errorTpl let-control>                  
                  <ng-container *ngIf="control.hasError('required')">请输入类型及列名!</ng-container>
                  <ng-container *ngIf="control.hasError('error')">列名重复!</ng-container>
                </ng-template>
              </nz-input-group>
            </div>

            <div nz-col nzSpan="2" *ngIf="listOfControl.length>1 && i >= 1">
              <i nz-icon nzType="minus-circle-o" class="dynamic-delete-button"
                (click)="removeField(control, $event)"></i>
            </div>
          </div>

        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzXs]="{ span: 24, offset: 0 }" [nzSm]="{ span: 14, offset: 6 }">
          <button nz-button nzType="dashed" class="add-button" (click)="addField($event)">
            <i nz-icon nzType="plus"></i>
            新增
          </button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>

  <ng-template #footerTpl>
    <div style="float: right">
      <button nz-button style="margin-right: 8px;" (click)="close()">取消</button>
      <button nz-button nzType="primary" (click)="submitForm()">添加</button>
    </div>
  </ng-template>
</nz-drawer>
